<template>
  <div class="page-container">
    <!-- Logo部分 -->
    <div class="logo-container">
      <a href="/" class="nav-logo-link" aria-label="Amazon">
        <img src="@/assets/images/Amazon_logo.svg.webp" alt="Amazon" class="amazon-logo" />
      </a>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="login-container">
        <!-- 验证框 -->
        <div class="a-box">
          <div class="a-box-inner">
            <h1 class="a-spacing-small">{{ $t('验证邮箱地址') }}</h1>

            <form @submit.prevent="handleVerify">
              <!-- 提示信息 -->
              <div class="verify-message">
                <span>{{ $t('为验证您的电子邮件地址，我们向') }}</span>
                <span class="email-text">{{ email }}</span>
                <span>{{ $t('发送了一个验证码') }}</span>
                <a
                  href="#"
                  class="a-link-normal"
                  @click.prevent="handleChangeEmail"
                >（{{ $t('更改') }}）</a>
              </div>

              <!-- 验证码输入框 -->
              <div class="a-form-field">
                <label class="a-form-label">{{ $t('输入验证码') }}</label>
                <input
                  v-model="form.code"
                  type="text"
                  ref="codeInput"
                  class="a-input-text"
                  :class="{ 'a-form-error': formError }"
                />
                <div v-if="formError" class="a-alert-error">
                  {{ errorMessage }}
                </div>
              </div>

              <!-- 继续按钮 -->
              <button
                type="submit"
                class="a-button-primary"
                :disabled="isLoading"
              >
                {{ $t('验证') }}
              </button>

              <!-- 重新发送链接 -->
              <div class="resend-section">
                <a href="#" class="a-link-normal">{{ $t('重新发送验证码') }}</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="a-footer">
      <div class="a-footer-content">
        <div class="a-footer-links">
          <a href="#" class="a-link-normal">{{ $t('使用条件') }}</a>
          <a href="#" class="a-link-normal">{{ $t('隐私声明') }}</a>
          <a href="#" class="a-link-normal">{{ $t('帮助') }}</a>
        </div>
        <div class="a-footer-copy">
          {{ $t('© 1996-2024, Amazon.com, Inc.或其附属公司') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const router = useRouter()
const route = useRoute()
const codeInput = ref<HTMLInputElement | null>(null)
const isLoading = ref(false)
const formError = ref(false)
const errorMessage = ref('')
const email = ref(route.query.email as string)

const form = reactive({
  code: ''
})

onMounted(() => {
  if (!route.query.email) {
    router.replace('/register')
    return
  }
  codeInput.value?.focus()
})

const handleVerify = async () => {
  try {
    if (!form.code) {
      formError.value = true
      errorMessage.value = t('请输入验证码')
      return
    }

    isLoading.value = true
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    router.push('/login')
  } catch (error) {
    formError.value = true
    errorMessage.value = t('验证失败，请重试')
  } finally {
    isLoading.value = false
  }
}

const handleChangeEmail = () => {
  router.push({
    path: '/register',
    query: { email: email.value }  // 可选：传回邮箱值以便预填
  })
}
</script>

<style lang="scss" scoped>
// 复用基础样式
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
}

.logo-container {
  padding: 14px 0 10px;
  text-align: center;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

.login-container {
  width: 350px;
}

.a-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;

  .a-box-inner {
    padding: 25px 27px;
  }
}

.a-spacing-small {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 18px;
}

.verify-message {
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 14px;

  .email-text {
    font-weight: 700;
    margin: 0 4px;
  }
}

.a-form-field {
  margin-bottom: 26px;
}

.a-form-label {
  display: block;
  padding-left: 2px;
  padding-bottom: 2px;
  font-weight: 700;
  font-size: 14px;
  line-height: 19px;
}

.a-input-text {
  width: 100%;
  height: 31px;
  padding: 3px 7px;
  line-height: normal;
  border: 1px solid #a6a6a6;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,.07) inset;
  font-size: 13px;

  &:focus {
    border-color: #e77600;
    box-shadow: 0 0 3px 2px rgba(228,121,17,.5);
  }

  &.a-form-error {
    border-color: #d00;
    box-shadow: 0 0 0 3px rgba(221,0,0,.1) inset;
  }
}

.a-alert-error {
  margin-top: 4px;
  color: #c40000;
  font-size: 12px;
}

.a-button-primary {
  width: 100%;
  height: 31px;
  font-size: 13px;
  background: #f4d078;
  background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
  border: 1px solid;
  border-color: #a88734 #9c7e31 #846a29;
  border-radius: 3px;
  cursor: pointer;

  &:hover {
    background: linear-gradient(to bottom, #f5d78e, #eeb933);
  }

  &:disabled {
    background: #f9f9f9;
    border-color: #e7e7e7;
    cursor: not-allowed;
  }
}

.resend-section {
  margin-top: 14px;
  text-align: center;
}

.a-link-normal {
  color: #0066c0;
  text-decoration: none;

  &:hover {
    color: #c45500;
    text-decoration: underline;
  }
}

.amazon-logo {
  width: 103px;
  height: 31px;
  object-fit: contain;
}

.nav-logo-link {
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  padding: 0;
  height: 31px;
}

.a-footer {
  margin-top: auto;
  border-top: 1px solid #ddd;
  padding: 26px 0;

  &-content {
    max-width: 920px;
    margin: 0 auto;
  }

  &-links {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-bottom: 10px;

    a {
      font-size: 12px;
    }
  }

  &-copy {
    text-align: center;
    color: #555;
    font-size: 12px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .login-container {
    width: 90%;
    max-width: 400px;
  }
}
</style>
